import {TouchableOpacity, View} from 'react-native';
import {ColorItem} from '@/store/slices/landscapeColorsSlice';
import {Text} from 'tsun-smart-ui';
import {useAppTheme} from 'tsun-smart-ui';
const CustomLegend = ({
  colors,
  setColors,
}: {
  colors: ColorItem[];
  setColors: (colors: ColorItem[]) => void;
}) => {
  const theme = useAppTheme();
  return (
    <View className="flex-row flex-wrap gap-y-2 gap-x-3 mt-5">
      {colors.map(color => {
        return (
          <TouchableOpacity
            key={color.title}
            onPress={() => {
              setColors(
                colors.map(item => ({
                  ...item,
                  visible:
                    item.title === color.title ? !item.visible : item.visible,
                })),
              );
            }}
            style={{
              borderColor: !color.visible
                ? theme.colors?.background?.disabled
                : theme.colors?.background?.primary,
              backgroundColor: !color.visible
                ? theme.colors?.neutral?.white
                : theme.colors?.background?.primary,
            }}
            className="flex-row items-center gap-x-1 py-[6] px-[10]  border rounded-2xl">
            <View
              className=" size-2 rounded-full"
              style={{
                backgroundColor: color.color,
              }}></View>
            <Text
              variant="caption"
              style={{
                color: theme.colors?.neutral?.primary,
              }}>
              {color.title}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

export default CustomLegend;
